<template>
  <div class="map-wrapper">
    <div ref="chartMap" style="width: 100%;height: 100%;" />
  </div>
</template>
<script>
  import axios from 'axios'
  import china from './../../../public/china-main-city/china.json'
  import cityMap from './../../../public/china-main-city/china-main-city-map.js'
  import chinaArea from './../../../public/china-main-city/china-area.json'
  import getSysOrgList from './../../../public/china-main-city/getSysOrgList.json'
  import setOption from './config'
  import { mapState, mapMutations } from 'vuex'
  const echarts = require('echarts')
  export default {
    name: 'EchartMap',
    data() {
      return {

      }
    },
    computed: {
      myChart() {
        return echarts.init(this.$refs.chartMap)
      },
      getSysOrgList() {
        return getSysOrgList.data
      }
    },
    mounted() {
      // 先判断缓存里是否有区域信息
      if (this.selectedName) {
        // 有 显示缓存的百度地图或区块图
        this.initMap(this.selectedName)
      } else {
        // 没有 默认显示中国地图
        this.loadMap('中国')
      }
      this.resizeChart() // 添加监听事件，监听窗口变化
      this.setSize() // 初始化图形大小
      // this.$emit('on-area-selected', (name) => {
      //   this.loadMap(name)
      // })
    },
    beforeDestroy() {
      // 组件被销毁后解除监听事件
      window.onresize = null
      this.myChart.dispose()
    },
    methods: {
      setSize() {
        this.myChart.resize()
      },
      resizeChart() {
        // 监听窗口宽度变化
        window.onresize = () => {
          this.setSize()
        }
      },
      loadMap(name) {
        const option = setOption(name)
        if (!cityMap[name]) return
        const promise = axios.get(`./china-main-city/${cityMap[name]}.json`).then(rsp => {
          echarts.registerMap(name, rsp.data)
          return rsp.data
        })
        promise.then(json => {
          if (this.myChart) {
            this.myChart.clear()
            this.myChart.setOption(option, { lazyUpdate: true })
            this.myChart.off('click') // 先取消click再绑定
            this.myChart.on('click', (params) => {
              console.log('点击了', params)
              this.loadMap(params.name)
              this.handleAreaName(params.name)
            })
            window.addEventListener('resize', () => { this.myChart.resize() })
          }
        })
        return promise
      },
      handleAreaName(name) {
        // 根据name把其拼接成 (4)-[1860]-{顺河回族区}的形式
        let obj = {}
        this.getSysOrgList.forEach(e0 => {
          if (e0.orgName === name) {
            obj = {
              name: name,
              id: e0.orgCode,
              optType: e0.orgType
            }
          } else {
            e0.children.forEach(e1 => {
              if (e1.cityName === name) {
                obj = {
                  name: name,
                  id: e1.cityCode,
                  optType: e1.cityType
                }
              } else {
                if (e1.children) {
                  e1.children.forEach(e2 => {
                    if (e2.areaName === name) {
                      obj = {
                        name: name,
                        id: e2.areaCode,
                        optType: 5
                      }
                    }
                  })
                }
              }
            })
          }
        })
        console.log(obj)
        this.$emit('onLoadMap', obj)
        // areaType为4点击的是区县，此时应显示百度地图
        if (obj.optType == 4 || obj.optType == 5) {
          // show百度地图
          this.$emit('showBaiduMap', true)
        }
      },
      // 初始化地图
      initMap(name) {
        const reg1 = /\((.+?)\)/g // 匹配小括号
        const reg3 = /\{(.+?)\}/g // 匹配大括号
        const areaType = reg1.exec(name)[1]
        const areaName = reg3.exec(name)[1]
        // 显示百度地图
        if (areaType === '4') {
        } else {
          // 显示echart区块图
          this.loadMap(areaName)
        }
      }
    }
  }
</script>
<style scoped>
.map-wrapper {
    width: 100%;
    height: 100%;
}
</style>
